
<div style="POSITION: relative" id="content">
  <h3>easyUI 在主datagrid上创建子datagrid </h3>
  <div id="article_content" class="article_content">
    <p>使用<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid详细视图,用户可以展开一行去显示一个附加的详细信息,任何类容可以加载作为行详细,<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">subgrid(子datagrid)也可以动态加载.这个教程将向你展示如何创建一个子grid在主grid上.</span></span></p>
    <p><img src="documentation/images/1344655632_6434.png" alt=""></p>


    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤 1: 创建主要的 DataGrid</h4>
    <pre name="code" class="html">&lt;table id=&quot;dg&quot; style=&quot;width:700px;height:250px&quot; url=&quot;datagrid22_getdata.php&quot; title=&quot;DataGrid - SubGrid&quot; singleselect=&quot;true&quot; fitcolumns=&quot;true&quot;&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;itemid&quot; width=&quot;80&quot;&gt;Item ID&lt;/th&gt;  
            &lt;th field=&quot;productid&quot; width=&quot;100&quot;&gt;Product ID&lt;/th&gt;  
            &lt;th field=&quot;listprice&quot; align=&quot;right&quot; width=&quot;80&quot;&gt;List Price&lt;/th&gt;  
            &lt;th field=&quot;unitcost&quot; align=&quot;right&quot; width=&quot;80&quot;&gt;Unit Cost&lt;/th&gt;  
            &lt;th field=&quot;attr1&quot; width=&quot;220&quot;&gt;Attribute&lt;/th&gt;  
            &lt;th field=&quot;status&quot; width=&quot;60&quot; align=&quot;center&quot;&gt;Status&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
&lt;/table&gt;  </pre>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤 &nbsp;2: 设置详细视图显示子grid</h4>
    使用详细视图,切记引入view script js文件在你的页面的头部.
    <p>
    <pre name="code" class="html">&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.jeasyui.com/easyui/datagrid-detailview.js&quot;&gt;&lt;/script&gt;  </pre>
    <pre name="code" class="javascript">$('#dg').datagrid({  
    view: detailview,  
    detailFormatter:function(index,row){  
        return '&lt;div style=&quot;padding:2px&quot;&gt;&lt;table id=&quot;ddv-' + index + '&quot;&gt;&lt;/table&gt;&lt;/div&gt;';  
    },  
    onExpandRow: function(index,row){  
        $('#ddv-'+index).datagrid({  
            url:'datagrid22_getdetail.php?itemid='+row.itemid,  
            fitColumns:true,  
            singleSelect:true,  
            rownumbers:true,  
            loadMsg:'',  
            height:'auto',  
            columns:[[  
                {field:'orderid',title:'Order ID',width:100},  
                {field:'quantity',title:'Quantity',width:100},  
                {field:'unitprice',title:'Unit Price',width:100}  
            ]],  
            onResize:function(){  
                $('#dg').datagrid('fixDetailRowHeight',index);  
            },  
            onLoadSuccess:function(){  
                setTimeout(function(){  
                    $('#dg').datagrid('fixDetailRowHeight',index);  
                },0);  
            }  
        });  
        $('#dg').datagrid('fixDetailRowHeight',index);  
    }  
});  </pre>
    当用户点击展开按钮('+'),onExpandRow事件将被触发,我们创建一个新的子grid和3列,记得调用fixDetailRowHeight方法对主grid,当子grid数据加载成功 之后改变大小.</p>

    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤 3: 服务器端代码</h4>
    <span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid22_getdata.php</span>
    <p>
    <pre name="code" class="php">$result = array();  
  
include 'conn.php';  
  
$rs = mysql_query(&quot;select * from item where itemid in (select itemid from lineitem)&quot;);  
  
$items = array();  
while($row = mysql_fetch_object($rs)){  
    array_push($items, $row);  
}  
  
echo json_encode($items);  </pre>
    <span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid22_getdetail.php</span>
    </p>
    <p>
    <pre name="code" class="php">$itemid = $_REQUEST['itemid'];  
  
include 'conn.php';  
  
$rs = mysql_query(&quot;select * from lineitem where itemid='$itemid'&quot;);  
$items = array();  
while($row = mysql_fetch_object($rs)){  
    array_push($items, $row);  
}  
echo json_encode($items);  </pre>
    </p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI 示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/datagrid/downloads/easyui-datagrid22-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-datagrid-demo.zip</a></div>
    <br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>